<template>
    <div>
        <div v-if="active==1">
            <el-form ref="form" :model="param">
                <el-container>
                    <el-form-item>
                        <el-input v-model="param.caseNo" placeholder="案号" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-select v-model="param.caseApproveStatus" placeholder="请选择审批状态">
                            <el-option label="请选择" value=""></el-option>
                            <el-option label="审批中" value="1"></el-option>
                            <el-option label="审批不通过" value="2"></el-option>
                            <el-option label="审批通过" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-select v-model="param.caseTypeName" placeholder="请选择子业务类型">
                            <el-option label="请选择" value=""></el-option>
                            <el-option v-for="type in Types" :key="type.id" :label="type.caseTypeName" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-date-picker type="date" placeholder="提交开始日期" v-model="param.caseSubtime"  value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-date-picker type="date" placeholder="提交结束日期" v-model="param.caseSubtime1" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-button type="primary" @click="search">搜索</el-button>
                    </el-form-item>
                </el-container>
            </el-form>

            <el-table
                    :data="pageResult.records"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="caseNo"
                        label="案号">
                </el-table-column>
                <el-table-column
                        prop="caseTypeName"
                        label="业务子类型">
                </el-table-column>
                <el-table-column
                        prop="caseApproveStatus"
                        label="审批状态">
                    <template slot-scope="scope">
                        {{scope.row.caseApproveStatus == 1 ? '审批中':(scope.row.caseApproveStatus == 2?'审批不通过':'审批通过' )}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="caseSubtime"
                        label="提交时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="selectFlow(scope.row)" type="text" size="small">查看流程</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-footer class="case-exam-footer">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="pageResult.total"
                        :page-size="pageResult.size"
                        class="pagination"
                        @current-change="handleIndexChange"
                >
                </el-pagination>
            </el-footer>
        </div>

        <select-flow @back="active=1" :row="row"  v-if="active==2"></select-flow>
    </div>
</template>

<script>

    import CaseLawService from '../../../model/gs/CaseLawService.js'
    const caseLawService =CaseLawService.getInstance();

    import CaseTypeService from '../../../model/gs/CaseTypeService.js'
    const caseTypeService =CaseTypeService.getInstance();

    import SelectFlow from './SelectFlow.vue'

    export default {
        name: "CaseLaw",
        data(){
            return{
                active:1,
                param:{},
                pageResult:{},
                dialogVisible:false,
                row:{},
                Types:[]
            }
        },
        methods:{
            list(){
                caseLawService.selectByForm(this.param).then(response=>{
                 this.pageResult = response.data.data
                })
            },
            handleIndexChange(index){
                this.param.page = index
                this.list()
            },
            selectFlow(row){
                this.row=row
                this.active++
            },
            parentList(){
                caseTypeService.parentList().then(response=>{
                    this.Types = response.data.data
                })
            },
            search(){
                this.param.page=1
                this.list();
            },
            checkPath(path){
                if(path=='/List2'){
                    this.param.isOwn = '1'
                }else{
                    this.param.isOwn = '0'
                }
                this.list();
            },
            handleDateChange(){
                this.param.caseSubtime
            }
        },
        watch:{
            $route(to){
                this.checkPath(to.path)
            }
        },
        created() {
            this.parentList();
            this.checkPath(this.$route.path)
        },
        components:{
            SelectFlow
        }
    }
</script>

<style scoped>
    .case-exam-footer{
        width: 100%;
        position: relative;
    }
    .pagination{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
